<template>
	<view class="infoContainer">
		<view class="top">
			<view class="word">
				{{infoData.word}}
			</view>
			<view class="wordSymbol">
				<uni-icons type="sound-filled" size="25"></uni-icons><text>{{infoData.symbol}}</text>
			</view>
		</view>
		<view class="translate">
			<view class="title">词义</view>
			<view class="translateBox">
				{{infoData.translate}}
			</view>
		</view>
		<view class="example">
			<view class="title">例句</view>
			<view class="exampleBox">
				{{infoData.example}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "word-info",
		props: {
			infoData: {
				type: Object,
				default: {},
				require: true
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style>
	.infoContainer {
		padding: 1rem 0;
	}

	.top {
		/* margin-top: 1rem; */
	}

	.top .word {
		color: rgba(16, 16, 16, 1);
		font-size: 20px;
		text-align: left;
		font-family: SourceHanSansSC-bold;
	}

	.top .wordSymbol {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 19.5rem;
		height: 2rem;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 0.88rem;
		text-align: left;
		font-family: -apple-system;
		margin: 1rem 0;
	}

	.top .wordSymbol uni-icons {
		margin: 0 0.3rem;
		cursor: pointer;
	}

	.title {
		color: rgba(16, 16, 16, 1);
		font-size: 1rem;
		text-align: left;
		font-family: PingFangSC-regular;
		margin: 1rem 0;
	}
	.example .exampleBox,
	.translate .translateBox{
		width: 17.5rem;
		min-height: 11.69rem;
		padding: 1rem;
		background-color: rgba(255, 255, 255, 1);
		text-align: left;
	}
</style>